<template>
  <div>
    <!-- 新增弹出框 -->
    <a-modal
      :title="addModel.title"
      :visible="addModel.open"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="close"
      width="920px"
    >
      <div style="width: 920px">
        <a-row class="f">
          <a-col style="width: 640px">
            <a-form-model layout="inline" :model="pageParams">
              <a-row style="margin: 0 0 30px 0">
                <a-form-model-item label="角色：">
                  <a-select
                    v-model="roleId"
                    placeholder="请选择角色"
                    style="width: 540px"
                  >
                    <a-select-option
                      :value="item.roleId"
                      v-for="item in roleList"
                      :key="item.roleId"
                    >
                      {{ item.roleName }}</a-select-option
                    >
                  </a-select>
                </a-form-model-item>
              </a-row>
              <div>
                <a-form-model-item label="用户名称">
                  <a-input
                    v-model="pageParams.userName"
                    placeholder="请输入用户名称"
                  />
                </a-form-model-item>
                <a-form-model-item label="手机号">
                  <a-input
                    v-model="pageParams.userPhone"
                    placeholder="请输入手机号"
                  />
                </a-form-model-item>
              
                  <a-form-model-item>
                    <a-button type="primary" @click="queryList" size="small"
                      >查询</a-button
                    >
                  </a-form-model-item>
             
              </div>
            </a-form-model>
            <a-table
              :columns="columnsList.columns"
              :data-source="columnsList.datatable"
              :pagination="false"
              :loading="loading"
              :scroll="{ y: 700 }"
            >
              <span slot="name" slot-scope="text">{{ text }}</span>
              <span slot="operation" slot-scope="text, record">
                <a-button
                  type="link"
                  @click="addUser(record)"
                  size="small"
                  v-show="handelData(record.userId)"
                  >选中</a-button
                >
                <a-button
                  type="link"
                  @click="delUser(record)"
                  size="small"
                  v-show="!handelData(record.userId)"
                  >取消</a-button
                >
              </span>
            </a-table>
            <div class="pagination">
              <a-pagination
                v-model="pageParams.pageNum"
                :total="total"
                show-less-items
                @change="PageNumChange"
              />
            </div>
          </a-col>
          <a-col style="width: 240px;margin-left:10px">
            <div class="fcc" >已选中</div>
            <a-row class="fcc" style="margin-top:10px" >
              <a-col :span="12" class="fcc"> 用户名</a-col>
              <a-col :span="12" class="fcc"> 手机号码 </a-col>
            </a-row>
             <a-row class="fcc" style="margin-top:10px ;color:#719dff" v-for="item in userList" :key="item.userId">
              <a-col :span="12" class="fcc"> {{item.userName}}</a-col>
              <a-col :span="12" class="fcc"> {{item.userPhone}} </a-col>
            </a-row>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getAllGeneralUserList, getRoleUsers ,addRoleUserList} from "@/services/dataApi";
export default {
  props: {
    addModel: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      confirmLoading: false,
      pageParams: {
        userName: "",
        userPhone: "",
        pageNum: 1,
        pageSize: 10,
      },
     roleId:undefined,
      rules: {},
      total: 0,
      loading: false,
      roleList: [],
      userIds: [], //用户角色
      userList: [],
      columnsList: {
        columns: [
          {
            title: "序号",
            dataIndex: "name",
            customRender: function (text, record, index) {
              return parseInt(index) + 1;
            },
            align: "center",
          },
          {
            title: "用户名称",
            dataIndex: "userName",
            key: "userName",
            align: "center",
          },
          {
            title: "手机号码",
            dataIndex: "userPhone",
            key: "userPhone",
            align: "center",
          },
          {
            title: "性别",
            dataIndex: "sex",
            customRender(text, record) {
              return record.sex == 1 ? "男" : "女";
            },
            align: "center",
          },
          {
            title: "邮箱",
            dataIndex: "email",
            key: "email",
            align: "center",
          },
          {
            title: "操作",
            dataIndex: "operation",
            scopedSlots: { customRender: "operation" },
            align: "center",
          },
        ],
        datatable: [],
      },
    };
  },

  created() {
    this.getData();
    this.getRoleUsers();
    if (this.addModel.kitId) {
      this.getInfo();
    }
  },
  computed: {
    handelData() {
      return (userId) => {
        if (this.userIds.indexOf(userId) != -1) {
          return false;
        } else {
          return true;
        }
      };
    },
  },
  methods: {
    //用户数据查询
    queryList() {
      this.getData();
    },
    addUser(row) {
      if(!this.roleId){
             this.$message.error("请选择角色");
        return
      }
      this.userIds.push(row.userId);
      this.userList.push(row);
    },
    delUser(row) {
      let index = this.userIds.indexOf(row.userId);
      this.userIds.splice(index, 1);
      this.userList.splice(index, 1);
    },
    //获取角色
    getRoleUsers() {
      getRoleUsers().then((res) => {
        if (res.retcode == "success") {
          this.roleList = res.data;
        }
      });
    },
    getData() {
      this.loading = true;
      getAllGeneralUserList(this.pageParams).then((res) => {
        if (!res) return;
        this.loading = false;
        this.columnsList.datatable = res?.data.list;
        this.total = res?.data?.total;
      });
    },
    getInfo() {},
    // 改变页码
    PageNumChange(page, pageSize) {
      this.pageParams.pageNum = page;
      this.pageParams.pageSize = pageSize;
      this.getTableList();
    },
    //提交
    handleOk() {
    
   if(!this.roleId){
      this.$message.error("请选择角色");
    return 
   }
          addRoleUserList({roleId:this.roleId,userIds:this.userIds}).then((res) => {
            if (res.retcode == "success") {
              this.$emit("refresh");
              this.close();
              this.$message.success("操作成功");
            }
        
      });
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  margin: 10px 0;
  background: #f7f7f7ff;
  padding: 10px 10px;
  border-radius: 10px;
}

.pagination {
  height: 60px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>